<template>
	<view v-if="pageShow" style="padding-bottom: 150rpx;">
		<!-- <u-swiper :list="list1" height="360" radius="0" :autoplay="false" keyName="image_text" indicator circular></u-swiper> -->
		<!-- <view class="mainpadding radius ffffff" style="position: relative;top: -10rpx;">
			<view class="flexleft">
				<image class="listleftimg radius margin_right2" :src="dataAll.logo_text" mode=""></image>
				<view class="flexcolumnbet" style="height: 140rpx;width: 100%;">
					<view class="flexbetween" style="width: 100%;">
						<view class="titletext hei_text bold">{{dataAll.name}}</view>
					</view>
					<view>
						<text class="main_size hei_text bold margin_right">营业时间：{{dataAll.yysj}}</text>
						<text class="titletext hei_text bold "
							style="font-size: 40rpx;">{{dataAll.star}}分</text>
					</view>
				</view>
			</view>
			<view class="margin_top flexbetween">
				<view class="">
					<view class="flexleft">
						<u-icon name="phone" color="#999" size="16"></u-icon>
						<text class="xiaohui ershil margin_left1">{{dataAll.tel}}</text>
					</view>
					<view class="flexleft margin_top2">
						<u-icon name="map" color="#999" size="16"></u-icon>
						<text class="xiaohui ershil margin_left1 xiankuan">{{dataAll.address_detail}}</text>
					</view>
				</view>
				<view class="flexright">
					<view class="flexcolumn margin_right6" @click="callphone(dataAll.tel)">
						<image src="../static/images/system/phone.png" style="width: 80rpx;height: 80rpx;" mode="">
						</image>
						<view class="xiaohuang margin_top1">电话</view>
					</view>
					<view class="flexcolumn" @click="openlocation">
						<image src="../static/images/system/map.png" style="width: 80rpx;height: 80rpx;" mode="">
						</image>
						<view class="xiaolan margin_top1">导航</view>
					</view>
				</view>
			</view>
			<view class="flexbetween margin_top">
				<button open-type="share" hover-class="none">
					<view class="fxbtn flexcenter">分享门店</view>
				</button>
				<view class="fxbtn flexcenter" @click="gz_fn(listid)">{{dataAll.is_gz?"取消关注":"关注门店"}}</view>
			</view>
		</view> -->
		<!-- <view class="mainpadding_top ffffff flexbetween" @click="tzlqyhq(listid)">
			<view class="titletext hei_text bold">优惠券</view>
			<view class="flexright ">
				<u-icon name="arrow-right" color="#ff9341" size="16"></u-icon>
			</view>
		</view> -->
		<view class="mainpadding" style="padding-bottom: 0;">
			<view class="flexleft">
				<image class="listleftimg hearradius margin_right2" :src="dataAll.logo_text" mode=""></image>
				<view class="flexcolumnbet" style="height: 120rpx;width: 100%;">
					<view class="sanshier hei_text bold">{{dataAll.name}}</view>
					<view class="flexleft">
						<view class="flexcolumn" style="margin-right: 100rpx;">
							<text class="sanshier hei_text bold ">{{dataAll.star}}分</text>
							<u-rate :count="5" v-model="dataAll.star" allowHalf gutter="0" readonly></u-rate>
						</view>
						<view class="">
							<view class="smalltext hei_text margin_right">营业时间：{{dataAll.yysj}}</view>
							<view class="smalltext hei_text margin_right">浏览数：{{dataAll.view_num}} 关注：{{dataAll.gz_num}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="margin_top flexleft">
				<view class="flexleft margin_right" @click="callphone(dataAll.tel)">
					<u-icon name="phone" color="#999" size="16"></u-icon>
					<text class="xiaohui ershil margin_left1">{{dataAll.tel}}</text>
				</view>
				<view class="flexleft" @click="openlocation">
					<u-icon name="map" color="#999" size="16"></u-icon>
					<text class="xiaohui ershil margin_left1">{{dataAll.address_detail}}</text>
				</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="fxbtn flexcenter" @click="tzlqyhq(listid)">优惠券</view>
				<view class="fxbtn flexcenter" @click="gz_fn(listid)">{{dataAll.is_gz?"取消关注":"关注门店"}}</view>
				<button open-type="share" hover-class="none">
					<view class="fxbtn flexcenter">分享门店</view>
				</button>
			</view>
		</view>

		<!-- <u-tabs :list="tabList" @click="tabchange" lineWidth="60rpx"
			lineColor="rgba(255, 184, 0, 1)" :activeStyle="{
		  color: '#000000',
		  fontWeight: 800,
		  transform: 'scale(1.05)'}" :inactiveStyle="{
		  color: '#666666',
		    transform: 'scale(1)'
		}"></u-tabs> -->
		<view class="mainpadding">
			<scroll-view scroll-x="true">
				<view>
					<view class="flexleft" style="width: 100%;">
						<view class="flexcolumn margin_right3" v-for="item in tabList" style="min-width: 120rpx;"
							:key="item.id" @click="tabchange(item)">
							<view :class="tabsid==item.id?'xiaohei titletext bold' :'xiaohui titletext'">{{item.name}}
							</view>
							<view :class="tabsid==item.id?'line':'noline'" class="margin_top2"></view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="mainpadding2" v-if="tabsid==1">
			<view class="flexbetween flex_wrap">
				<view class="ffffff margin_top radius" style="width: 48%;" v-for="item in list.data" :key="item.id"
					@click="tzspxq(item.id,item.goods_attr)">
					<image :src="item.image_text" mode="" class="goodstopimg" style="height: 350rpx;"></image>
					<view class="" style="padding: 30rpx 10rpx 20rpx;">
						<view class="titletext hei_text bold yihang">{{item.title}}</view>
						<view class="flexbetween margin_top2">
							<view class="hong_text titletext bold" v-if="item.goods_attr==1">￥{{item.goodsprice.price}}
							</view>
							<view class="hong_text titletext bold" v-if="item.goods_attr==2">
								￥{{item.goodsprice.pt_price}}</view>
							<view class="hong_text titletext bold" v-if="item.goods_attr==3">
								￥{{item.goodsprice.ms_price}}</view>
							<view class="xiaohui strongtext">月售{{item.sales}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="tabsid==6">
			<view class="ffffff radius mainpadding margin_top" v-for="item in listjd.data" :key="item.id"
				@click="tzjdxq(item.id,item.distance)">
				<view class="flexleft">
					<view class="flexcenter sanshis" v-for="(ite,inde) in item.images_text" :key="inde"
						v-if="inde==0 || inde==1 || inde==2">
						<image class="tupian" :src="ite" mode=""></image>
					</view>
				</view>
				<view class="zhonghei fonweight sanshier margin_top">{{item.name}}</view>

				<view class="flexleft margin_top2">
					<u-icon name="man-add" color="#ff9341" size="16"></u-icon>
					<view class="xiaohuang margin_right margin_left1 strongtext">粉丝{{item.fans_num}}个</view>
					<u-icon name="eye" color="#999" size="16"></u-icon>
					<view class="xiaohui margin_right margin_left1 strongtext">浏览{{item.views}}次</view>
				</view>
				<view class="flexbetween margin_top2">
					<view class="flexleft">
						<u-icon name="map" color="#ff9341" size="16"></u-icon>
						<view class="xiaohui margin_left1 main_size yhxk" style="width: 500rpx;">{{item.detail}}</view>
					</view>
					<view class="xiaohuang main_size">{{returnKmUnit(Number(item.distance))}}</view>
				</view>
			</view>
		</view>
		<view class="margin-top ffffff" v-if="tabsid==2 && dataAll.content">
			<u-parse :content="dataAll.content"></u-parse>
			<!-- <view class="flexleft margin_top2">
				<u-icon name="map" color="#999" size="18"></u-icon>
				<text class="hei_text main_size margin_left1">{{dataAll.address}}</text>
			</view>
			<view class="flexleft flex_wrap">
				<view class="flexcenter margin_top" style="width: 33.33%;">
					<image class="listleftimg2 radius" :src="dataAll.mtz_image_text"
						@click="lbtpriview(0,[dataAll.mtz_image_text])" mode="">
					</image>
				</view>
				<view class="flexcenter margin_top" style="width: 33.33%;" v-if="hjzindex==0 || hjzindex==1" v-for="(hjz,hjzindex) in dataAll.hjz_image_text">
					<image class="listleftimg2 radius" :src="hjz"
						@click="lbtpriview(hjzindex,dataAll.hjz_image_text)" mode="">
					</image>
				</view>
			</view>
			<view class="margin_top flexbetween">
				<view class="flexleft">
					<u-icon name="phone" color="#999" size="18"></u-icon>
					<text class="xiaohui ershil main_size margin_left1">{{dataAll.tel}}</text>
				</view>
				<view class="flexright">
					<view class="flexcolumn margin_right6" @click="callphone(dataAll.tel)">
						<image src="../static/images/system/phone.png" style="width: 80rpx;height: 80rpx;" mode="">
						</image>
						<view class="xiaohuang margin_top1">电话</view>
					</view>
					<view class="flexcolumn" @click="openlocation">
						<image src="../static/images/system/map.png" style="width: 80rpx;height: 80rpx;" mode="">
						</image>
						<view class="xiaolan margin_top1">导航</view>
					</view>
				</view>
			</view> -->
		</view>
		<view class="" v-if="tabsid==3">
			<view class="dingwei margin_top">
				<!-- <image class="tupian" src="https://cdn.uviewui.com/uview/swiper/swiper1.png" mode=""></image>
				<view class="bofang">
					<u-icon name="play-circle" color="#f8f8f8" size="68"></u-icon>
				</view> -->
			</view>
			<video :src="dataAll.video_url_text" id="videoid" style="width: 100%;"></video>
		</view>
		<view class="mainpadding_top ffffff" v-if="tabsid==5">
			<view class="" v-for="(item,index) in dataAll.ryzz_images_text" :key="index"
				@click="lbtclick(index,dataAll.ryzz_images_text)">
				<image :src="item" style="width: 100%;" mode="widthFix"></image>
			</view>
		</view>
		<view class="" v-if="tabsid==4">
			<view class="mainpadding radius ffffff margin_top" v-for="(item,index) in listpj.data" :key="item.id">
				<view class="flexbetween">
					<view class="flexleft">
						<image class="touxiag margin_right2" :src="item.user.avatar_text" mode=""></image>
						<view class="">
							<view class="zhonghei sanshier ">{{item.user.nickname}}</view>
							<view class="xiaohui ershil margin_top1 ">{{item.createtime_text}}</view>
						</view>
					</view>
					<u-rate :value="item.star" activeColor="#ff9341" readonly></u-rate>
				</view>
				<view class="xiaohui ershiba margin_top">{{item.content}}</view>
				<template v-if="item.video_url_text">
					<video class="scyyzz margin_top" :id="'video'+index" :src="item.video_url_text"
						@play="videoplay(index)"></video>
				</template>
				<view class="flexleft flex_wrap pdl">
					<view class="flexcenter tpbox " v-for="(ite,ind) in item.images_text" :key="ind">
						<view class="tjtp">
							<image class="" :src="ite" mode="" @click="lbtpriview(ind,item.images_text)"></image>
						</view>
					</view>

				</view>
				<view class="huibox margin_top mainpadding" v-if="item.reply_content">
					<view class="xiaohui ershiba">商家回复：
						<text class="xiaohei ershiba">{{item.reply_content}}</text>
					</view>
				</view>
				<view class="huibox margin_top mainpadding" v-if="item.zp_content">
					<view class="xiaohui ershiba">追评：
						<text class="xiaohei ershiba">{{item.zp_content}}</text>
					</view>
				</view>
			</view>
		</view>
		<tabbarshop :current="1" :shopid="listid" :shopInfo="dataAll"></tabbarshop>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [],
				tabsid: 1,
				tabList: [
						{
						name: "门店商品",
						id: 1,
					},
					// {
					// 	name: "民宿酒店",
					// 	id: 6,
					// }, 
					{
						name: "门店详情",
						id: 2,
					}, {
						name: "荣誉资质",
						id: 5,
					}, {
						name: "门店视频",
						id: 3,
					}, {
						name: "门店评价",
						id: 4,
					}
				],
				pageShow: false,
				dataAll: {},
				listid: "",
				page: 1,
				list: {
					data: []
				},
				pagepj: 1,
				listpj: {
					data: []
				},
				pagejd: 1,
				listjd: {
					data: []
				},
				changePlay: false,
				lat: "",
				lng: "",

			}
		},
		onLoad(options) {
			let storagecity = uni.getStorageSync("storagecity") || null
			if (storagecity) {
				this.lat = storagecity.latitude
				this.lng = storagecity.longitude
			}
			this.listid = options.id
			if (options.code) {
				uni.setStorageSync("invite_code", options.code)
			}
			this.getDetail()
			// this.init()
			this.initjd()
		},
		onHide() {
			let videos = uni.createVideoContext("videoid")
			videos.pause()
		},
		onShareAppMessage() {
			let _this = this
			return {
				title: "喜嘟来",
				path: "pages_shouye/mendianxq?code=" + uni.getStorageSync("myinvite_code") + "&id=" + _this.listid,
			}
		},
		methods: {
			videoplay(index) {
				let _this = this;
				//全局变量changePlay表示正在切换。每次切换完播放等一秒在恢复，解决Android下的问题
				if (this.changePlay) {
					return
				}
				_this.changePlay = true
				let currentIndex = 'video' + index; // 获取当前视频索引
				console.log("playVideo currentIndex ", currentIndex)
				// 获取视频列表
				this.listpj.data.forEach((item, index) => { // 获取json对象并遍历, 停止非当前视频
					if (item.video_url_text) {
						let temp = 'video' + index;
						if (temp != currentIndex) { //判断名字是否一致
							// 暂停其余视频
							console.log(temp, currentIndex, '暂停播放');
							uni.createVideoContext(temp, _this).pause(); //暂停视频播放事件
						}
					}

				})
				setTimeout(() => {
					_this.changePlay = false
				}, 1000)
			},
			tzjdxq(id, juli) {
				let date = {
					id: id, //酒店id
					start: this.start, //年月日
					end: this.end, //年月日
					startime: this.startime, //开始时间
					endtime: this.endtime, //结束时间
					startweek: this.startweek, //开始周
					endweek: this.endweek, //结束周
					daynum: this.daynum,
					juli: juli
				}
				uni.navigateTo({
					url: '/pages_lianmengsc/jiudianxq?msg=' + encodeURIComponent(JSON.stringify(date))
				})
			},
			gz_fn(id) { //关注/取消关注
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				httpRequest.request('/api/shopcl/collectShop', 'GET', {
					shop_id: id
				}).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.dataAll.gz_num = this.dataAll.is_gz ? Number(this.dataAll.gz_num) - 1 : Number(this
							.dataAll.gz_num) + 1
						this.dataAll.is_gz = this.dataAll.is_gz ? 0 : 1
					}
				})
			},
			init(isPage, page) {
				let _this = this
				httpRequest.request('/api/goodscl/goodsList', 'GET', {
					page: page || 1,
					limit: 12,
					shop_id: this.listid
				}).then(res => {
					if (res.code == 1) {
						if (res.data.total != 0 && this.dataAll.is_hotle) {
							this.tabList.unshift({
								name: "门店商品",
								id: 1,
							})
							this.tabsid = 1
						}
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			initpj(isPage, page) {
				let _this = this
				let url = "/api/goodscl/goodsComment"
				if(this.dataAll.is_hotle){
					url = "/api/Hotelcl/hotelCommentIndex"
				}
				httpRequest.request(url, 'GET', {
					page: page || 1,
					limit: 12,
					shop_id: this.listid
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.listpj;
						if (isPage == true) {
							_this.listpj.data = dataList.data.concat(resList.data);
						} else {
							_this.listpj = res.data
							_this.listpj.data = resList.data;
						}
						console.log(this.listpj);
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			initjd(isPage, page) {
				let _this = this
				httpRequest.request('/api/hotelcl/hotelIndex', 'GET', {
					page: page || 1,
					limit: 12,
					shop_id: this.listid,
					lng: this.lng,
					lat: this.lat,
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.listjd;
						if (isPage == true) {
							_this.listjd.data = dataList.data.concat(resList.data);
						} else {
							_this.listjd = res.data
							_this.listjd.data = resList.data;
						}
						console.log(this.listjd);
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = null
				let page = null
				if (this.tabsid != 1 && this.tabsid != 4) {
					return false
				}
				if (this.tabsid == 1) {
					list = _this.list;
					page = _this.page;
				}
				if (this.tabsid == 4) {
					list = _this.listpj;
					page = _this.pagepj;
				}
				if (this.tabsid == 6) {
					list = _this.listjd;
					page = _this.listjd;
				}
				if (list.last_page <= page) {
					return false;
				}
				console.log(list, page);
				page++;
				if (this.tabsid == 1) {
					_this.page = page;
					_this.init(true, page);
				}
				if (this.tabsid == 4) {
					_this.pagepj = page;
					_this.initpj(true, page);
				}
				if (this.tabsid == 6) {
					_this.pagejd = page;
					_this.initjd(true, page);
				}
			},
			getDetail() {
				httpRequest.request('/api/shopcl/shopDetail', 'GET', {
					id: this.listid
				}, false, false, false).then(res => {
					this.pageShow = true
					if (res.data.is_hotle) {
						this.tabList = [{
								name: "民宿酒店",
								id: 6,
							},
							{
								name: "门店详情",
								id: 2,
							}, {
								name: "荣誉资质",
								id: 5,
							}, {
								name: "门店视频",
								id: 3,
							}, {
								name: "门店评价",
								id: 4,
							}
						]
						this.tabsid = 6
					}
					this.init()
					if (res.data.video_url_text) {
						this.list1 = [res.data.mtz_image_text].concat(res.data.hjz_image_text).concat([res
							.data.video_url_text
						])
					} else {
						this.list1 = [res.data.mtz_image_text].concat(res.data.hjz_image_text)
					}
					res.data.content = res.data.content ? res.data.content.replace(/\<img/gi,
						'<img style="display:block" ') : "";
					this.dataAll = res.data
					this.initpj()//获取评价列表
				})
			},
			openlocation() {
				let that = this
				uni.openLocation({
					latitude: Number(that.dataAll.latitude), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(that.dataAll.longitude), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: that.dataAll.name, //即将传到高德或腾讯地图的店铺名称
					address: that.dataAll.address_detail, //即将传到高德或腾讯地图的详细地址
					scale: 18
				})
			},
			// 跳转商品详情
			tzspxq(id, attr) {
				uni.navigateTo({
					url: '/pages_lianmengsc/shangpxq?id=' + id + "&attr=" + attr
				})
			},
			// 跳转领取优惠券
			tzlqyhq(id) {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.navigateTo({
					url: '/pages_shouye/lingquyouhq?id=' + id
				})
			},
			tabchange(e) {
				if (e.id == this.tabsid) {
					return false
				}
				this.tabsid = e.id
				let videos = uni.createVideoContext("videoid")
				videos.pause()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.line {
		background-color: rgba(255, 184, 0, 1);
		width: 60rpx;
		height: 5rpx;
		border-radius: 50rpx;
	}

	.noline {
		background-color: rgba(255, 184, 0, 0);
		width: 60rpx;
		height: 5rpx;
		border-radius: 50rpx;
	}

	image {
		display: block !important;
	}

	/deep/.uicon-star {
		font-size: 15rpx !important;
	}

	.scyyzz {
		width: 100%;
		height: 291rpx;
	}

	.tpbox {
		width: 33.33%;
		margin-top: 30rpx;
	}

	.tjtp {
		width: 209rpx;
		height: 209rpx;
		position: relative;

		image {
			border-radius: 10rpx;
			width: 100%;
			height: 100%;
		}
	}

	.huibox {
		background: #F5F5F5;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
	}

	.touxiag {
		width: 73rpx;
		height: 73rpx;
		border-radius: 50%;
	}

	.bofang {
		position: absolute;
		bottom: 28%;
		left: 42%;
	}

	.tupian {
		width: 100%;
		height: 381rpx;
	}

	.fxbtn {
		width: 150rpx;
		height: 70rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		border: 1rpx solid #FF9341;
		color: #FF9341;
		border-radius: 16rpx;
	}

	.use {
		padding: 5rpx 30rpx;
		text-align: center;
		line-height: 49rpx;
		background: rgba(255, 133, 5, 0.1);
		border-radius: 10rpx;
		border: 1rpx solid #FF8505;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
	}

	.tupian {
		width: 200rpx;
		height: 200rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	.hhbtn {
		width: 89rpx;
		height: 37rpx;
		border-radius: 37rpx 37rpx 37rpx 37rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #999999;
		border: 2rpx solid #999999;
	}

	.dqicon {
		width: 30rpx;
		height: 30rpx;
	}

	.bjsdw {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		width: 100%;
		height: 248rpx;
		background: linear-gradient(0deg, #f9e2d1 0%, #FF9341 100%);
	}
</style>